<template>
    <div class="login">
        <div class="titleimgbox">
            <img class="titleimg" src="../../static/image/logibtitle.png" alt="">
        </div>

        <div class="contentbox">
            <div class="contentLeft">
                <img class="loginimg" src="../../static/image/loginimg.png" alt="">
            </div>
            <!-- 登录 -->
            <div class="contentRight">
                <div class="contentRighttitle">{{ $t('assemble.忘记密码') }}</div>
                <div class="btnBox">
                    <div class="btn" :class="{ btned: currIndex == '1' }" @click="handleBtned('1')">{{ $t('assemble.手机号登录')
                    }}</div>
                    <div class="btn" :class="{ btned: currIndex == '2' }" @click="handleBtned('2')">{{ $t('assemble.邮箱登录')
                    }}</div>
                </div>

                <div class="loginbox">
                    <el-form ref="forgetpassword" :model="forgetpassword" label-position="top">
                        <el-form-item v-if="currIndex == '1'" :label="this.$t('assemble.手机号登录')">
                            <el-input class="inputFlag" v-model="forgetpassword.moblieoremail"
                            :placeholder="this.$t('assemble.请输入手机号')"></el-input>
                            <img class="canadaimg" src="../../static/image/canada.png" alt="">

                        </el-form-item>
                        <el-form-item v-else :label="this.$t('assemble.邮箱登录')">
                            <el-input v-model="forgetpassword.moblieoremail" :placeholder="this.$t('assemble.请输入邮箱地址')"></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="请输入你已绑定的手机号/邮箱">
                            <el-input v-model="forgetpassword.moblieoremail" placeholder="请输入手机号/邮箱地址"></el-input>
                        </el-form-item> -->

                        <el-form-item v-if="currIndex == '1'" :label="this.$t('assemble.验证码')">
                            <el-input v-model="forgetpassword.authcode" :placeholder="this.$t('assemble.请输入验证码')"></el-input>
                            <p v-if="codeFlag" class="sendcode" @click="handlesendcode">{{ $t('assemble.发送验证码') }}</p>
                            <p v-else class="gain">
                                {{ time }}s
                            </p>
                        </el-form-item>
                        <el-form-item v-else :label="this.$t('assemble.验证码')">
                            <el-input v-model="forgetpassword.authcode" :placeholder="this.$t('assemble.请输入验证码')"></el-input>
                            <p v-if="codeFlag" class="sendcode" @click="handlesendcode">{{ $t('assemble.发送验证码') }}</p>
                            <p v-else class="gain">
                                {{ time }}s
                            </p>
                        </el-form-item>

                        <!-- <el-form-item label="请输入手机号/邮箱内的验证码">
                            <el-input v-model="forgetpassword.authcode" placeholder="请输入验证码"></el-input>
                            <p class="sendcode">发送验证码</p>
                        </el-form-item> -->

                        <el-form-item :label="this.$t('assemble.新密码')">
                            <el-input v-model="forgetpassword.newpassword" :placeholder="this.$t('assemble.请输入新密码')"
                                show-password></el-input>
                        </el-form-item>

                        <el-form-item :label="this.$t('assemble.确认新密码')">
                            <div v-if="okpasswordFlag" class="okpass">{{ $t('assemble.输入新密码和确认新密码需要一致') }}</div>
                            <el-input v-model="forgetpassword.okpassword" :placeholder="this.$t('assemble.确认新密码')"
                                show-password></el-input>
                        </el-form-item>

                    </el-form>




                    <div class="btnbox">
                        <div class="btn ok" @click="handleresetPassword">{{ $t('assemble.确定') }}</div>
                        <div class="btn back" @click="back()">{{ $t('assemble.返回') }}</div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
  
<script>
import { resetpassword, getmobileCode, getemailCode } from "../../utils/api.js"
import debounce from '@/utils/debounce.js';

export default {
    data() {
        return {
            okpasswordFlag: false,
            forgetpassword: {
                moblieoremail: '',
                authcode: '',
                newpassword: '',
                okpassword: '',
            },
            currIndex: "1",
            time: 60,
            codeFlag: true,
            interval: null
        }
    },
    methods: {

        async handlesendcode() {
            this.codeFlag = false
            let that = this
            that.interval = window.setInterval(function () {
                if ((that.time--) <= 0) {
                    that.codeFlag = true
                    that.time = 60
                    window.clearInterval(that.interval)
                }
            }, 1000)

            if (that.currIndex == '1') {
                let res = await getmobileCode({
                    mobile: '1' + this.forgetpassword.moblieoremail,
                })
                if (res.code == 1000) {
                    this.$message({
                        message: '验证码已发送，请注意查收！',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            } else {
                let res = await getemailCode({
                    email: this.forgetpassword.moblieoremail,
                })
                if (res.code == 1000) {
                    this.$message({
                        message: '验证码已发送，请注意查收！',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }


        },

        handleBtned(e) {
            this.currIndex = e
            this.forgetpassword.moblieoremail = ""
            this.codeFlag = true
            window.clearInterval(this.interval)
            this.time = 60
        },
        handleresetPassword() {
            debounce(() => {
                this.handleresetPasswords()
            }, 500)
        },


        async handleresetPasswords() {

            if (this.forgetpassword.newpassword != this.forgetpassword.okpassword) {
                this.okpasswordFlag = true
                return
            }
            let data = {}
            if (this.currIndex == '1') {
                data = {
                    type: this.currIndex,
                    username: '1' + this.forgetpassword.moblieoremail,
                    password: this.forgetpassword.newpassword,
                    password1: this.forgetpassword.okpassword,
                    code: this.forgetpassword.authcode,
                }
            } else {
                data = {
                    type: this.currIndex,
                    username: this.forgetpassword.moblieoremail,
                    password: this.forgetpassword.newpassword,
                    password1: this.forgetpassword.okpassword,
                    code: this.forgetpassword.authcode,
                }
            }


            let res = await resetpassword(data)
            if (res.code == 1000) {
                console.log("忘记密码",)
                this.$message({
                    message: "修改成功，请重新登录！",
                    type: 'success'
                });
                this.$router.push({ path: "/login" })
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
        },
        back() {
            console.log("back")
            this.$router.back()
        }
    }
}

</script> 
  
<style scoped lang="scss">
::v-deep .el-date-editor.el-input__inner {
    height: 37px;
    background-color: #F7F8FA;
}

::v-deep .el-date-editor .el-range-input {
    // height: 50px;
    background-color: #F7F8FA;
}

::v-deep .el-input__inner {
    border: none;
    border-radius: 10px;
    background-color: #F7F8FA;

}

.btnBox {
    width: 188px;
    display: flex;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 13px;

    .btn {
        width: 75px;
        height: 30px;
        border-radius: 10px;
        background-color: #F7F8FA;
        text-align: center;
        line-height: 30px;
        margin-right: 15px;
        cursor: pointer;
    }

    .btned {
        background-color: #0057A7;
        color: #FFFFFF;
    }
}

.login {
    width: 100%;
    height: 100vh;
    background-image: url("../../static/image/backimg.png");
    background-size: 100% 100%;
}

.titleimgbox {
    width: 470px;
    height: 55px;
    padding-top: 100px;
    margin: 0px auto;

    .titleimg {
        width: 470px;
        height: 55px;
    }
}

.contentbox {
    width: 900px;
    height: 509px;
    background: linear-gradient(90deg, #DDEFFF 0%, #FFFFFF 60%);
    border-radius: 30px 30px 30px 30px;
    opacity: 1;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;

    .contentLeft {
        // width: 495px;
        height: 509px;
        padding-top: 140px;
        padding-left: 70px;

        .loginimg {
            width: 371px;
            height: 229px;
        }
    }

    .contentRight {
        width: 345px;
        height: 506px;
        // background-color: pink;
        padding-top: 45px;
        padding-right: 45px;
        box-sizing: border-box;

        .contentRighttitle {
            font-size: 22.5px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #000000;
            line-height: 26px;
        }

        .loginbox {
            // margin-top: 30px;
            position: relative;

            .inputFlag {

                // text-indent: 30px;
                ::v-deep .el-input__inner {
                    text-indent: 20px;
                }
            }

            .sendcode {
                // width: 82.5px;
                height: 22.5px;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                border: 1px solid #0057A7;
                font-size: 11px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #0057A7;
                line-height: 22.5px;
                text-align: center;
                position: absolute;
                top: -4px;
                right: 10px;
                cursor: pointer;
                padding: 0 5px;
            }

            .canadaimg {
                width: 20px;
                height: 15px;
                position: absolute;
                left: 5px;
                top: 13px;
            }

            .gain {
                font-size: 14px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #0057A7;
                line-height: 16px;
                position: absolute;
                top: -4px;
                right: 10px;
            }

            .okpass {
                font-size: 11px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #D32526;
                line-height: 15px;
                position: absolute;
                top: -30px;
                right: 105px;
            }

        }





        .btnbox {
            // width: 22px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            margin-top: 22.5px;
            padding: 0 10px;

            .btn {
                width: 99px;
                height: 37px;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                font-size: 13px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 37px;
                text-align: center;
                cursor: pointer;
            }

            .ok {
                color: #FFFFFF;
                background: #0057A7;
            }

            .back {
                color: #333333;
                border: 1px solid #CCCCCC;
            }
        }
    }

}

::v-deep .el-form-item__label {
    padding: 0;
}

::v-deep.el-form-item {
    margin-bottom: 0;
}
</style>